<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <div th:replace="comm/page::layui_css"/>
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table id="role-table" lay-filter="role-table-filter"></table>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="auth">权限</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group" style="margin-top: 10px">
        <button lay-event="add_btn" type="button" id="add_btn" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
    </div>
</script>

<div th:replace="comm/page::layui_script"/>
<script th:inline="none">
    layui.use(['table'], function () {
        var $ = layui.jquery, table = layui.table,
            roleTable = table.render({
                elem: '#role-table',
                url: '/role/list',
                toolbar: '#toolbar',
                page: true,
                cols: [[
                    {type: 'numbers', minWidth: 30,},
                    // {field: 'code', minWidth: 120, title: '角色编号'},
                    {field: 'name', title: '角色名称'},
                    {field: 'remark', title: '备注'},
                    {templet: '#auth-state', width: 180, align: 'center', title: '操作'}
                ]],
                style: "margin-top:0;"
            });

        window.refreshView = function () {
            roleTable.reload();
        };

        //监听工具条
        table.on('tool(role-table-filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                var confirm = layer.confirm('确定要删除？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(confirm);
                    $.post("/role/del", {id: data.id}, function (e) {
                        if (e.code === 0) {
                            layer.msg(e.msg);
                            obj.del();
                        } else {
                            layer.msg(e.msg);
                        }
                    });
                }, function () {
                    layer.close(confirm);
                });

            } else if (layEvent === 'edit') {
                var add_dialog = layer.open({
                    type: 2,
                    title: '角色-编辑',
                    content: '/role/edit.html?id=' + data.id,
                    area: ['80%', '90%'],
                    maxmin: true,
                    shadeClose: true
                });
                layer.full(add_dialog);
            } else if (layEvent === 'auth') {
                var auth_dialog = layer.open({
                    type: 2,
                    title: '授权-编辑',
                    content: '/role/auth.html?id=' + data.id,
                    area: ['60%', '90%'],
                    maxmin: false,
                    shadeClose: true
                });
                // layer.full(auth_dialog);
            }
        });
        //监听工具条
        table.on('toolbar(role-table-filter)', function (obj) {
            console.log(obj);
            var layEvent = obj.event;
            if (layEvent === 'add_btn') {
                var add_dialog = layer.open({
                    type: 2,
                    title: '角色-新增',
                    content: '/role/add.html',
                    area: ['80%', '90%'],
                    maxmin: true,
                    shadeClose: true
                });
                layer.full(add_dialog);
            }
        });


    });
</script>
</body>
</html>